<template>
  <div class="ec-title">
    <div class="ec-titleCon">
      <div class="ec-arrL" @click="goBack"><img src="../../../static/images/eng-corner/arrL.png" alt=""/></div>
      <div class="ec-titleTxt">{{title}}</div>
      <router-link to="/common/searchBox?title=搜索课程" tag="div">
        <div class="ec-search">
          <img src="../../../static/images/eng-corner/search.png" alt=""/>
        </div>
      </router-link>
    </div>
  </div>
</template>
<script>
    export default{
      name:'ectitle',
      data:function(){
        return {
          title:""
        }
      },
      watch:{
        '$route':"getTitle"
        // 对路由变化作出响应...
      },
      created:function(){

      },
      mounted:function(){
      },
      methods:{
        getTitle:function(){
          this.title=this.$route.query.title
        },
        goBack:function(){
          this.$router.back();
        }
      }
    }
</script>
<style>
  .ec-title{
    width: 100%;
    background: #ED6942;
    padding:10px 0;
    font-size: 16px;
    display: flex;
    color: #fff;
    /*letter-spacing: 2px;*/
    justify-content: center;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
  }
  .ec-titleCon{
    width:86%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  .ec-arrL img{
    width: 20px;
    height:20px;
  }
  .ec-search img{
    width: 20px;
    height:20px
  }
  .ec-search{
    display: flex;
  }
  .ec-search input{
    width:70%;
    border: none;
    outline: none;
    background: transparent;
    border-bottom: 1px solid #F2A28B;
    padding: 0 10px;
    font-size: 16px;
    color:#eee;
  }
  .ec-search div{
    display: flex;
  }
  @media (max-width: 320px){
    .ec-title{
      padding:7px 0;
      font-size: 15px;
    }
  }
</style>
